<script>
// 导入所有内容，给其添加一个别名叫 XLSX
import * as XLSX from 'xlsx';

export default {
    name: 'import',
    data() {
        return {
            proList: [],
            currentPage: 1,
            pageSize: 5
        }
    },
    methods: {
        importClick() {
            // 先找到输入框，然后调用输入框的点击事件
            this.$refs.inp.click()
        },
        changeFile(event) {

            // console.log(event.target.files[0]);
            // 1. 获取到我们选择的文件
            const file = event.target.files[0]

            // 2. 将文件内容读取出来
            const reader = new FileReader()
            reader.readAsBinaryString(file)

            reader.onload = () => {
                // 将内容读取成数据流
                // console.log(reader.result);

                // 将数据流转换成 js 对象
                const obj = XLSX.read(reader.result, { type: 'binary' })
                // console.log(obj);

                // 获取工作表1 中的内容
                let res = obj.Sheets['工作表1']
                // 取出我们要用的数据
                // console.log(res);
                res = XLSX.utils.sheet_to_json(res)

                // console.log(res);
                // 将数据显示出来
                this.proList = res
            }

            // 3. 将读出来的内容显示出来

        }
    },
    computed: {
        tabData() {
            return this.proList.slice((this.currentPage - 1) * this.pageSize, (this.currentPage - 1) * this.pageSize + this.pageSize)
        }
    }
}
</script>
<template>
    <h2 class="title">
        文件导入
        <el-button @click="importClick">选择文件</el-button>
        <input hidden ref="inp" @change="changeFile" type="file">
    </h2>

    <el-table :data="tabData">
        <el-table-column label="序号" type="index">
            <template #default="scope">
                <div>
                    {{ (currentPage - 1) * pageSize + 1 + scope.$index }}
                </div>
            </template>
        </el-table-column>
        <el-table-column label="图片">
            <template #default="scope">
                <el-image style="width: 80px;height: 80px;" :src="scope.row.img1"> </el-image>
            </template>
        </el-table-column>
        <el-table-column label="商品名称" prop="proname"> </el-table-column>
        <el-table-column label="商品分类" prop="category"> </el-table-column>
        <el-table-column label="商品价格" prop="originprice"> </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" :total="proList.length" v-model:current-page="currentPage"
        :page-size="pageSize" />
</template>
<style scoped lang="scss">
.title {
    margin: 5px 0;
}
</style>